<template>
  <section>
    <van-sticky>
      <PageHeader title="我的推广" />
    </van-sticky>

    <div class="bg-color-white pd10 mb10 font-common" v-if="statistic">
      <p class="text-left">引流：直属粉丝 <span class="color-red">{{statistic.fans.first}}</span> 人，间接粉丝 <span class="color-red">{{statistic.fans.second}}</span> 人</p>
      <p class="text-left">收益：共 <span class="color-red">{{statistic.salary.all}}</span> 元，今日 <span class="color-red">{{statistic.salary.today}}</span> 元，昨日 <span class="color-red">{{statistic.salary.yesterday}}</span> 元，过去7日 <span class="color-red">{{statistic.salary.last7days}}</span> 元</p>
    </div>

    <van-tabs v-model="type" @change="onTabChanged" scrollspy sticky>
      <van-tab title="我推荐的" name="recommend">
        <template v-if="type == 'recommend'">
          <van-list
            class="mt10"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="requestData">
            <div class="flex flex-row flex-center bg-color-white mb10 pd10 member-item"
                 v-for="(item, index) in dataList"
                 :key="index"
                  @click="$router.push({name: 'MemberProfile', query: {id: item.member.id}})">
              <div class="flex flex-row flex-center">
                <img :src="item.user.avatar_url ? item.user.avatar_url : STATIC_BASE_URL + 'images/mp/gender.png'" class="avatar" />
              </div>

              <div class="flex flex-col flex-1 pl10 pr10">
                <div class="flex flex-row flex-left font-big">{{item.user.nick}}</div>
                <div class="flex flex-row flex-left font-common color-gray-dark">注册时间：{{item.user.register_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
                <div class="flex flex-row flex-left font-common color-gray-dark">最后登录：{{item.user.last_login_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
                <div class="flex flex-row">
                  <div class="flex flex-row flex-left flex-1 font-common color-gray-dark"><span class="color-red">{{item.user.matchmaker_level == 1 ? '直属' : '间接'}}粉丝</span></div>
                  <div class="flex flex-row flex-left flex-1 font-common color-gray-dark">累计消费：<span class="color-red">{{item.expend_amount}}</span>元</div>
                </div>
              </div>
            </div>
          </van-list>
        </template>
      </van-tab>
      <van-tab title="推广收益" name="salary">
        <template v-if="type == 'salary'">
          <van-list
            class="mt10"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="requestData">
            <div class="flex flex-row flex-center bg-color-white mb10 pd10 member-item"
                 v-for="(item, index) in dataList"
                 :key="index"
                 @click="$router.push({name: 'MemberProfile', query: {id: item.member.id}})" v-if="item.user">
              <div class="flex flex-row flex-center">
                <img :src="item.user.avatar_url ? item.user.avatar_url : STATIC_BASE_URL + 'images/mp/gender.png'" class="avatar" />
              </div>

              <div class="flex flex-col flex-1 pl10 pr10">
                <div class="flex flex-row flex-left font-big">{{item.user.nick}}</div>
                <div class="flex flex-row flex-left font-common color-gray-dark">收入：<span class="color-red">{{item.amount}}</span>元</div>
                <div class="flex flex-row flex-left font-common color-gray-dark">时间：{{item.dateline|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>
                <div class="flex flex-row flex-left font-common color-gray-dark">备注：{{item.remark}}</div>
              </div>
            </div>
          </van-list>
        </template>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Tab, Tabs, Toast, Sticky, List} from 'vant';
  import PageHeader from "../../componets/PageHeader";
  import {
    myMatchmakerRecommendUri,
    myMatchmakerSalaryListUri,
    myMatchmakerStatisticUri,
    STATIC_BASE_URL
  } from "../../../common/api";

  Vue.use(Toast).use(Sticky).use(Tab).use(Tabs).use(List);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        type: 'recommend',
        STATIC_BASE_URL: STATIC_BASE_URL,
        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: [],
        member: null,
        user: null,
        statistic: null
      }
    },
    methods: {
      onTabChanged(name, title) {
        this.currentPage = 1;
        this.lastPage = 0;
        this.total = 0;
        this.loading = false;
        this.finished = false;
        this.dataList = [];
        this.requestData();
      },
      getStatistic() {
        const that = this;
        const url = myMatchmakerStatisticUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.statistic = data;
          }
        }, response => {
          // error callback
        })
      },
      requestData() {
        const that = this;
        this.loading = true;
        const url = (that.type == 'recommend' ? myMatchmakerRecommendUri : myMatchmakerSalaryListUri) + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            let dataList = [];
            for (let i = 0; i < data.data.length; i++) {
              if(that.type == 'recommend') {
                const matchmakerUids = data.data[i].user.matchmaker_uids.split(',');
                for (let j = 0; j < matchmakerUids.length; j++) {
                  if(parseInt(matchmakerUids[j]) == parseInt(this.GLOBAL.userInfo.id)) {
                    data.data[i].user['matchmaker_level'] = j + 1;
                    break;
                  }
                }
              }
              dataList.push(data.data[i]);
            }
            that.dataList = dataList;
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      this.member = this.GLOBAL.memberProfile;
      this.user = this.GLOBAL.userInfo;
      if(this.user && this.user.is_matchmaker == 0) {
        Toast('请先申请成为红娘');
        this.$router.replace({name: 'MatchmakerIndex'});
      }
      this.EventBus.$on('OnUserLogined', () => {
        this.user = this.GLOBAL.userInfo;
        this.member = this.GLOBAL.memberProfile;
        if(this.user && this.user.is_matchmaker == 0) {
          Toast('请先申请成为红娘');
          this.$router.replace({name: 'MatchmakerIndex'});
        }
      });
      this.getStatistic();
      this.requestData();
    }
  }
</script>

<style scoped>
  .member-item .avatar {
    height: 60px;
    width: 60px;
    border-radius: 30px;
  }
</style>
